<template style="height: auto;">
  <view>
    <view class="changeimg">
      <button
        type="balanced"
        open-type="chooseAvatar"
        @chooseavatar="onChooseavatar"
      >
        <image
          v-if="userInfo.avatar"
          :src="userInfo.avatar"
          class="imgup"
        ></image>
        <image
          v-else
          :src="imgUrl+'/addpic.png'"
          class="imgup"
        ></image>
      </button>
    </view>
    <view class="username">
      <span>昵称：</span>
      <input
        class="input"
        type="nickname"
        placeholder="请输入昵称"
        maxlength="6"
        placeholder-style="color: #979797"
        v-model="userInfo.nickname"
        @blur="onNickName"
      />
    </view>
    <p class="ncts">限2-6个字符</p>
    <view
      class="re-btn"
      @tap="instantcharge"
    >保存</view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      avatars: '',
    }
  },
  onLoad(e) {},
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化接口
    init() {
      var that = this
      var param = {}
      return new Promise((resove, reject) => {
        this.$apiFun.getApi(
          this.$api.wxLoginUserInfoApi,
          param,
          function (res) {
            const { code, data } = res
            if (code == 200) {
              if (data.isGainHeadAndName === 0) {
                data.avatar = ''
                data.nickname = ''
              }
              that.$store.dispatch('setUserInfos', data)
              resove()
            }
          },
          function (err) {
            reject()
          }
        )
      })
    },
    onNickName(e) {
      this.userInfo.nickname = e.detail.value
    },
    onChooseavatar(e) {
      const that = this
      uni.uploadFile({
        url: that.$apiFun.host + that.$api.uploadApi, //仅为示例，非真实的接口地址
        filePath: e.detail.avatarUrl,
        // sourceType: ['album'],//从相册选择
        name: 'file',
        header: {
          token: uni.getStorageSync('localtokn'),
        },
        success: (uploadFileRes) => {
          uni.showToast({
            icon: 'none',
            title: JSON.parse(uploadFileRes.data).msg,
          })
          if (JSON.parse(uploadFileRes.data).code == 200) {
            that.userInfo.avatar = JSON.parse(uploadFileRes.data).data
          }
        },
      })
    },
    // 上传图片
    uploadimg() {
      const that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths
          uni.showLoading({
            title: '正在上传',
          })
          uni.uploadFile({
            url: that.$apiFun.host + that.$api.uploadApi, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            sourceType: ['album'], //从相册选择
            name: 'file',
            header: {
              token: uni.getStorageSync('localtokn'),
            },
            success: (uploadFileRes) => {
              uni.showToast({
                icon: 'none',
                title: JSON.parse(uploadFileRes.data).msg,
              })
              if (JSON.parse(uploadFileRes.data).code == 200) {
                if (tempFilePaths.length > 0) {
                  that.userInfo.avatar = JSON.parse(uploadFileRes.data).data
                }
              }
            },
          })
        },
      })
    },
    instantcharge() {
      const that = this
      const param = {
        nickName: that.userInfo.nickname,
        avatar: that.userInfo.avatar,
      }
      if (!that.userInfo.nickname || !that.userInfo.avatar) {
        uni.showToast({
          title: '请完善头像和昵称信息',
          icon: 'none',
        })
        return
      }
      this.$apiFun.postApi(
        this.$api.updateUserApi,
        param,
        async function (res) {
          const { code, data, msg } = res
          if (code == 200) {
            uni.showToast({
              title: msg,
              icon: 'none',
            })
            await that.init()
            setTimeout(() => {
              that.$emit('changeBtn')
            }, 2000)
          } else {
          }
        },
        function (err) {}
      )
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
.changeimg {
  width: 200rpx;
  margin: 0 auto;
  padding: 100rpx 0 140rpx 0;
  // botton 去除边框
  /deep/button::after {
    border: none;
  }
  /deep/button {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    background: #fff;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
}

.username {
  width: 80%;
  margin: 0 auto;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e9e9e9;
  display: flex;
  color: rgba(255, 255, 255,1);
  line-height: 44rpx;
}
.ncts {
  width: 80%;
  margin: 0 auto;
  color: #858585;
  font-size: 24rpx;
  line-height: 76rpx;
}

/* 立即充值按钮 */
.re-btn {
  width: 80%;
  margin: 90rpx auto;
  height: 80rpx;
  display: flex;
  border-radius: 20rpx;
  background-color: #f05251;
  font-size: 28rpx;
  color: #ffffff;
  align-items: center;
  justify-content: center;
}

.imgup {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100%;
  border: 2rpx solid #eb453c;
  overflow: hidden;
}
</style>
